<template>
<div class="commonContent">
  <div class="infoTitle">{{detailData.title}}</div>
  <p class="text-right label mt10">{{detailData.publishTime}}</p>
  <van-swipe class="my-swipe mt12" :autoplay="4000" v-if="detailData.coverImage && detailData.coverImage.length > 0">
    <van-swipe-item v-for="item in detailData.coverImage">
      <div class="imgDiv" :style="{background: 'url(' + setPreviewUrl(item) + ')', backgroundSize:'cover', backgroundPosition: 'center'}"
         @click="handlePreview(item,index)"
      ></div>
      <!-- <van-image width="100%" height="4rem" :src="setPreviewUrl(item)" fit="fill" /> -->
    </van-swipe-item>
  </van-swipe>
  <div class="cardContent itemContent mt12" style="text-indent:2em;">{{detailData.content}}</div>
</div>
</template>
<script>
import qs from 'qs';
import { ImagePreview } from 'vant';
export default {
  name: "infoDetail",
  data() {
    return {
      detailData: {},
      dataList: [{
        label: '服务类别',
        field: 'serveCategoryStr',
        type: 'text'
      }, {
        label: '服务对象',
        field: 'serveTargetStr',
        type: 'text'
      }, {
        label: '活动地址',
        field: 'address',
        type: 'text'
      }, {
        label: '活动时间',
        field1: 'startDate',
        field2: 'endDate',
        type: 'range'
      }, {
        label: '负责人',
        field: 'director',
        type: 'text'
      }, {
        label: '联系电话',
        field: 'directorPhone',
        type: 'text'
      }, {
        label: '活动介绍',
        field: 'content',
        type: 'text'
      }]
    }
  },
  created() {
    this.getDetail(this.$route.query.id)
  },
  methods: {
    getDetail(id) {
      let me = this;
      me.$api.getInfoDetail(qs.stringify({
        id: id
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        me.detailData = res;
      }).catch(err => {
        me.$toast(err)
      })
    },
    setPreviewUrl(item) {
      return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item
    },
    handlePreview(item,index) {
      let arr = JSON.parse(JSON.stringify(this.detailData.coverImage))
      var result = arr.map((item, i) => {
         return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item + '&type=1'
      });
      ImagePreview({
        images: result,
        startPosition: index
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.infoTitle {
    font-weight: bolder;
    font-size: 0.38rem;
    text-align: center;
    padding-top: 0.2rem;
}
</style>
